<template>
  <div id="app">
    <vue-particles
        color="#409EFF"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="6"
        linesColor="#409EFF"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push">
    </vue-particles>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#particles-js {
  width: 100%;
  height: calc(100% );
  position: absolute;
  z-index: -1;
}
.router-link-active {
  text-decoration: none;
}
.el-table-column {
  text-align: center;
}
.tebale_card {
  background-color: #ffffff00;
}
.el-table,
.el-table__expanded-cell {
  background-color: #ffffff00;
}
.in{
  width: 350px!important;
}
.register {
  width: 500px;
  height: 450px;
  border: 1px solid rgb(159, 237, 240);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -250px;
  margin-left: -250px;
}
.login {
  width: 500px;
  height: 350px;
  border: 1px solid rgb(159, 237, 240);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -250px;
  margin-left: -250px;
}
a {
  text-decoration: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
* {
  margin: 0;
  padding: 0;
  -webkit-transition: all linear 0.3;
  transition: all linear 0.3;
}
</style>
